<template>
  <div>
    <div v-for="(item, index) in categoryProductVos" :key="index">
      <div class="group-label">
        组合{{ numberToChinese(index + 1) }}
        <span class="shop-name" v-if="isPlatform">
          {{ item.shopId || "商户名称" }}
        </span>
      </div>
      <div>
        <div class="a-prod-main" ref="AProdMain">
          <div class="prod-list-panel" ref="AProdListPanel">
            <div class="a-prod-name">A商品名：</div>
            <div
              class="a-prod-buy-count"
              v-if="
                activityMerchantProdList[index].buyNumber != null &&
                acTypeInfo.id != 10
              "
            >
              {{ setAProdLabel }}{{ activityMerchantProdList[index].buyNumber }}
            </div>
            <div class="a-prod-list-container">
              <div v-for="a_info in item.categoryProductVo1" :key="a_info.id">
                <div class="a-prod-list">
                  <div class="a-prod-category">
                    <div>{{ a_info.categoryName }}</div>
                  </div>
                  <div class="prods-container">
                    <div
                      class="prod"
                      v-for="prod in a_info.productList"
                      :key="prod.prodId"
                    >
                      <div class="prod-pic">
                        <el-image
                          v-if="prod.pic"
                          class="prod-image"
                          :src="resourcesUrl + prod.pic"
                          :preview-src-list="[resourcesUrl + prod.pic]"
                        />
                      </div>
                      <div class="prod-name">
                        {{ prod.prodName }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more">
          <div
            class="unfold-more"
            @click="unfoldMore(index, 'AProdMain', 'AProdListPanel', 'aFold')"
          >
            {{
              styleUnfoldArr[index] && styleUnfoldArr[index].aFold
                ? "收起"
                : "展开更多"
            }}
            <i
              :class="[
                styleUnfoldArr[index] && styleUnfoldArr[index].aFold
                  ? 'el-icon-caret-top'
                  : 'el-icon-caret-bottom',
              ]"
            ></i>
          </div>
        </div>
        <div class="b-prod-main" ref="BProdMain" v-if="item.categoryProductVo2">
          <div class="prod-list-panel" ref="BProdListPanel">
            <div class="a-prod-name">
              {{ acTypeInfo.id == 11 ? "指定商品" : "B商品名" }}：
            </div>
            <div
              class="b-prod-buy-count"
              v-if="activityMerchantProdList[index].buySpecifyNumber != null"
            >
              {{ setBProdLabel
              }}{{ activityMerchantProdList[index].buySpecifyNumber }}
            </div>
            <div class="a-prod-list-container">
              <div v-for="a_info in item.categoryProductVo2" :key="a_info.id">
                <div class="a-prod-list">
                  <div class="a-prod-category">
                    <div>{{ a_info.categoryName }}</div>
                  </div>
                  <div class="prods-container">
                    <div
                      class="prod"
                      v-for="prod in a_info.productList"
                      :key="prod.prodId"
                    >
                      <div class="prod-pic">
                        <el-image
                          v-if="prod.pic"
                          class="prod-image"
                          :src="resourcesUrl + prod.pic"
                          :preview-src-list="[resourcesUrl + prod.pic]"
                        />
                      </div>
                      <div class="prod-name">
                        {{ prod.prodName }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more" v-if="item.categoryProductVo2">
          <div
            class="unfold-more"
            @click="unfoldMore(index, 'BProdMain', 'BProdListPanel', 'bFold')"
          >
            {{
              styleUnfoldArr[index] && styleUnfoldArr[index].bFold
                ? "收起"
                : "展开更多"
            }}
            <i
              :class="[
                styleUnfoldArr[index] && styleUnfoldArr[index].bFold
                  ? 'el-icon-caret-top'
                  : 'el-icon-caret-bottom',
              ]"
            ></i>
          </div>
        </div>
      </div>
      <div
        class="group-footer"
        v-if="activityMerchantProdList[index].discountMethod"
      >
        <el-row>
          <el-col :span="12">
            <div>
              优惠方式：
              {{
                ["", "减价优惠", "折扣优惠"][
                  activityMerchantProdList[index].discountMethod
                ]
              }}
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              优惠{{
                activityMerchantProdList[index].discountMethod == 1
                  ? "值"
                  : "比例"
              }}：{{
                activityMerchantProdList[index].discountMethod == 1
                  ? activityMerchantProdList[index].purchaseQuantity
                  : activityMerchantProdList[index].discountProportion * 100
              }}{{
                activityMerchantProdList[index].discountMethod == 1 ? "元" : "%"
              }}
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="group-footer" v-if="acTypeInfo.id == 10">
        <el-row>
          <el-col :span="12">
            <div>
              {{ setAProdLabel }}
              {{ activityMerchantProdList[index].buyNumber }} (个/份) 折扣
              {{ activityMerchantProdList[index].discountRate }} %
            </div>
          </el-col>

          <el-col :span="12">
            <div>
              {{ setAProdLabel }}
              {{ activityMerchantProdList[index].buySpecifyNumber }} (个/份)
              折扣 {{ activityMerchantProdList[index].specifyDiscountRate }} %
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { numberToChinese } from "@/utils";
export default {
  props: {
    acTypeInfo: {
      type: Object,
      default: () => ({}),
    },
    categoryProductVos: {
      type: Array,
      default: () => [],
    },
    activityMerchantProdList: {
      type: Array,
      default: () => [],
    },
    isPlatform: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    setAProdLabel() {
      if (this.acTypeInfo.id == 4) {
        return `优惠限制数量：`;
      } else if (this.acTypeInfo.id == 5) {
        return `购满第几个开始优惠：`;
      } else if (this.acTypeInfo.id == 6) {
        return `购满商品数量：`;
      } else if (this.acTypeInfo.id == 7) {
        return `A商品购满金额：`;
      } else if (this.acTypeInfo.id == 11 || this.acTypeInfo.id == 12) {
        return `A商品购买金额：`;
      } else {
        return `A商品购买数：`;
      }
    },
    setBProdLabel() {
      if (this.acTypeInfo.id == 2) {
        return `B商品搭赠数：`;
      } else if (this.acTypeInfo.id == 7) {
        return `需要加价的金额：`;
      } else if (this.acTypeInfo.id == 11) {
        return `获得所需支付：`;
      } else {
        return `B商品购买数：`;
      }
    },
  },
  data() {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      styleUnfoldArr: [],
    };
  },
  methods: {
    numberToChinese,
    unfoldMore(index, refName, childRefName, keyName) {
      if (this.styleUnfoldArr[index] && this.styleUnfoldArr[index][keyName]) {
        this.$refs[refName][index].style.height = "196px";
        let item = this.styleUnfoldArr[index];
        item[keyName] = false;
        this.$set(this.styleUnfoldArr, index, item);
      } else {
        this.$refs[refName][index].style.height =
          this.$refs[childRefName][index].clientHeight + 30 + "px";
        let item = {};
        if (this.styleUnfoldArr[index]) {
          item = this.styleUnfoldArr[index];
        }
        item[keyName] = true;
        this.$set(this.styleUnfoldArr, index, item);
      }
      console.log(this.styleUnfoldArr);
    },
  },
};
</script>

<style lang="scss" scoped>
.a-prod-main,
.b-prod-main {
  height: 196px;
  overflow: hidden;
  transition: height 0.3s linear;
}

.group-label {
  font-weight: bold;
  margin-left: 36px;
}
.shop-name {
  margin-left: 30px;
}
.prod-list-panel {
  position: relative;
  display: flex;
  margin-left: 22px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 15px 14px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 12px;
}

.a-prod-buy-count {
  position: absolute;
  right: 10px;
}

.b-prod-buy-count {
  position: absolute;
  right: 10px;
}

.a-prod-list-container {
  flex: 1;
}

.a-prod-list {
  width: 100%;
  margin-bottom: 20px;

  .a-prod-category {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #333333;
    font-size: 14px;
  }

  .prods-container {
    display: flex;
    flex-wrap: wrap;
    border-top: #cccccc9e solid 1px;
    padding-top: 8px;
  }
}

.prod {
  margin-right: 16px;
  width: 91px;
  height: max-content;
  background: white;
  border-radius: 6px;
  padding-bottom: 2px;
  margin-bottom: 14px;

  .prod-pic {
    .prod-image {
      height: 91px;
      width: 91px;
      border-radius: 6px;
    }
  }

  .prod-name {
    text-align: left;
    margin-left: 8px;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
  }
}

.more {
  height: 32px;
  line-height: 32px;
  color: #1890ff;
  cursor: pointer;
}

.unfold-more {
  width: max-content;
  margin: 0 auto;
}

.el-icon-caret-bottom {
  color: #1890ff;
}

.group-footer {
  box-sizing: border-box;
  padding: 27px 25px 52px 25px;
  border-top: #f5f5f5 solid 1px;
  border-bottom: #f5f5f5 solid 1px;
}
</style>
